<template>
  <el-form
      :model="labelData"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
  >
    <el-form-item label="新增下拉项">
      <el-select v-model="checkedLabel" @change="showInput" placeholder="请选择待添加要素">
        <el-option
            v-for="item in labelData"
            :key="item"
            :label="item"
            :value="item"
        ></el-option>
      </el-select>
      <el-row style="margin:10px auto;">
        <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            @keyup.enter="handleInputConfirm"
            placeholder="请输入待添加下拉列表项"
        >
        </el-input>
        <el-button v-else class="fontClass" size="small" @click="showInput">+添加下拉列表项，按enter键录入</el-button>
      </el-row>
    </el-form-item>
    <el-form-item label="待添加列表项">
       <el-row v-for="option in optionsArray">
         <span style="padding:0 10px;font-weight:bold;font-size: 1rem;">{{option.label}}</span>
         <el-tag
             v-for="tag in option.tags"
             :key="tag.name"
             closable
             @close="handleClose(tag,option.label)"
             :type="tag.type">
           <span class="fontClass">
             {{tag.name}}
           </span>
         </el-tag>
       </el-row>
    </el-form-item>
    <el-form-item>
      <el-button
          @click="handleSubmit"
          type="primary"
          round
          icon="el-icon-plus"
      >
        添加
      </el-button>
    </el-form-item>
  </el-form>

</template>
<script lang="ts">
import {computed, defineComponent, nextTick, reactive, ref} from 'vue'
import {errorMessage, successMessage} from "/@/utils/message";
import {addOptionsData} from "/@/api";
export default defineComponent({
  name:'',
  props:{
    labelData:{
      required:true,
      type:Array
    }
  },
  setup(props) {
    // 定义待添加下拉项列表类型
    interface optionsType{
      label:string,
      tags:Array<object>
    }
    // 定义标签类型
    interface tagType{
      name:string,
      type:string
    }

    /**
     * @param typeArray 标签类型数组
     * @param checkedLabel 当前选中项要素名称
     * @param inputVisible 是否显示输入框
     * @param inputValue 输入框的具体内容
     * @param saveTagInput 输入框的DOM元素
     * @param optionsArray 待添加下拉项列表
     */
    const typeArray=['','success','warning']
    const checkedLabel = ref<string>(null)
    const inputVisible = ref<boolean>(false)
    const inputValue = ref<string>('')
    const saveTagInput=ref<HTMLInputElement|null>(null)
    const optionsArray=ref<Array<optionsType>>([])
    // 删除标签的处理函数
    /**
     *
     * @param tag 待删除标签对象
     * @param label 标签所属要素名称
     */
    const handleClose = (tag,label) => {
      // 根据要素名称确定当前标签属于那一组下拉列表
      const index:number=optionsArray.value.findIndex(item=>item.label===label)
      // 从下拉列表中删除对应标签项
      optionsArray.value[index].tags=optionsArray.value[index].tags.filter(item=>item!==tag)
      // 删除标签后当前要素对应的标签数组为空，清除该要素
      if(optionsArray.value[index].tags.length===0){
        optionsArray.value[index]=null
      }
    }
    // 显示输入框，并聚焦输入框
    const showInput = () => {
      inputVisible.value = true
      nextTick(()=>{
          saveTagInput.value?.focus()
      })
    }
    // 新增标签的处理函数
    const handleInputConfirm = () => {
      // 如果输入框中有内容
      if (inputValue.value) {
        // 生成随机下标，用于生成随机类型的标签
        let randomIndex=Math.floor(Math.random()*typeArray.length)
        // 生成随机类型标签
        let tag=reactive<tagType>({
          name:inputValue.value,
          type:typeArray[randomIndex]
        })
        // 查看当前选中项要素是否已经存在于待添加列表中
        let index:number=optionsArray.value.findIndex(item=>item.label===checkedLabel.value)
        if(index===-1){
          // 不存在，则新创建一个对象，并存入待添加列表中
          let tags=[]
          tags.push(tag)
          optionsArray.value.push({
            label:checkedLabel.value,
            tags
          })
        }else{
          // 已存在，将当前标签添加到对应组的tags数组中
          optionsArray.value[index].tags.push(tag)
        }
        successMessage('添加成功！')
      }else{
        errorMessage('请输入内容后再进行操作！！！')
      }
      inputValue.value=''
    }
    const handleSubmit=async ()=>{
      const acrpCtAndIds:Array<object>=optionsArray.value.map(item=>{
        return {
          codeTableName:item.label,
          //@ts-ignore
          menuName:item.tags.map(tag=>tag.name)
        }
      })
      try{
        const res=await addOptionsData(acrpCtAndIds)
        if(res===1){
          successMessage('添加成功！')
        }else{
          errorMessage('网络错误')
        }
      }catch(e){
        errorMessage('网络错误')
      }
    }
    return {
      handleInputConfirm,
      showInput,
      handleSubmit,
      handleClose,
      checkedLabel,
      optionsArray,
      inputVisible,
      inputValue,
      labelData:computed(()=>props.labelData),
      saveTagInput
    };
  }
})
</script>

<style lang='scss' scoped>
.fontClass{
  font-size: 1rem;
}
</style>
